<template>
  <div>
    <div>
      <!-- 表单项 -->
      <el-form
        :model="searchFormData"
        label-width="80px"
        @submit.prevent
      >
        <el-row :gutter="5">
          <el-col :span="5">
            <!--input输入-->
            <el-form-item label="手机号">
              <el-input clearable placeholder="支持模糊搜索" v-model.trim="searchFormData.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="用户名">
              <el-input clearable placeholder="支持模糊搜索" v-model.trim="searchFormData.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-button type="primary" @click="loadData">搜索</el-button>
            <el-button type="danger" @click="reload">清空</el-button>
            <el-button type="primary" @click="showEdit()">新增用户</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="用户ID" prop="userId"></el-table-column>
      <el-table-column label="用户名" prop="userName"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="出生年月" prop="birthday"></el-table-column>
      <el-table-column label="性别" prop="sex">
        <template #default="scope">
          {{ SEX_MAP[scope.row.sex] }}
        </template>
      </el-table-column>
      <el-table-column label="职位" prop="positionl">
        <template #default="scope">
          {{ POSITION_MAP[scope.row.position] }}
        </template>
      </el-table-column>
      <el-table-column label="角色" prop="roles">
        <template #default="scope">
          {{ formateRoles(scope.row.roles) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button-group>
            <el-button size="small" type="primary"  @click="showEdit(scope.row)">修改</el-button>
            <el-button size="small" type="primary" @click="updatePwd(scope.row.userId)">修改密码</el-button>
            <el-popconfirm title="确定要删除吗？" @confirm="delUser(scope.row.userId)">
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </el-button-group>
        </template>
      </el-table-column>
   </el-table>
   <!-- 分页 -->
   <div :style="{'margin-top':'10px'}">
    <el-pagination 
      background 
      layout="prev, pager, next" 
      :total="total" 
      :page-size="pageSize"
      @current-change="pageChange"
    />
   </div>
   
   <!-- 新增或修改 -->
   <UserEdit ref="userEditRef" @reload="loadData"></UserEdit>
   <!-- 修改密码 -->
   <UpdatePasswaod ref="updatePasswaodRef"></UpdatePasswaod>
  </div>
</template>

<script setup>
import UpdatePasswaod from './UpdatePasswaod.vue'
import UserEdit from './UserEdit.vue';
import {ElMessage} from 'element-plus'
import axios from 'axios'
import { ref, reactive, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance();
import {SEX_MAP,POSITION_MAP,ROLES_MAP} from '../utils/Constants.js';

//接口
const api={
  loadDataList:"/userInfo/query",
  delUser:"userInfo/delete"
};

const formateRoles=(roles)=>{
  let roleArray=roles.split(",");
  let result=[];
  roleArray.forEach(element => {
    result.push(ROLES_MAP[element])
  });
  return result.join(",");
}
//搜索参数
const searchFormData=ref([])
//表格和分页参数
const tableData=ref([])
const total=ref(0)
const pageSize=ref(5)
const pageNo=ref(1)

//显示表格
const loadData=async ()=>{
  //构造搜索参数
  const params=Object.assign({},searchFormData.value)
  params.pageNo=pageNo.value
  //向接口发起请求
  let result=await axios.get(api.loadDataList,{
    params:params
  });
  console.log(result);
  const data=result.data;
  if(data.message!="ok"){
    ElMessage.error("出错啦！");
    return;
  }
  tableData.value=data.data.list
  total.value=data.data.total
  pageSize.value=data.data.pageSize
}

//页面加载显示表格
loadData();
//点击分页数字触发事件
const pageChange=(e)=>{
  console.log(e);
  pageNo.value=e;
  loadData();
}
//清空按钮
const reload=()=>{
  searchFormData.value=[]
  loadData();
}

const userEditRef=ref();
const showEdit=(data)=>{
  console.log(data);
  let param=null;
  if(data){
    param=Object.assign({},data);
  }
  userEditRef.value.show(param);
};

const updatePasswaodRef=ref();
const updatePwd=(userId)=>{
  console.log(userId);
  updatePasswaodRef.value.show(userId)
}

const delUser=async (userId)=>{
  let result=await axios.get(api.delUser,{
    params:{userId:userId}
  });
  console.log(result);
  const data=result.data;
  if(data.message!="ok"){
    ElMessage.error("出错啦！");
    return;
  }
  ElMessage.success("保存成功");
  loadData();
}
</script>

<style scoped>
</style>
